<!-- 时间选择模块 -->
<template>
	<view>
		<list iconPath="/static/allMeetingIcos/time.svg" message="会议时间" type="time" :month="month" :time="startTimeShow"
			:time2="endTimeShow" @child-clicked="chooseTimeSelect"></list>
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="datetime" :formatter="formatter"
			@confirm="confirm" @cancel="cancel">
		</u-datetime-picker>
		<u-popup :show="popup" mode="bottom" round="14" @close="closeRemindShow">
			<text class="tip">点击选择时间</text>
			<view class="popupListTimeT">
				<view @click="openChooseTime" v-if="selectStartAndEnd">
					<text>开始时间:</text>
					<text class="change">{{ startTimeShow }}
					</text>
				</view>
				<view @click="openChooseTime" v-if="!selectStartAndEnd">
					<text>结束时间:</text>
					<text class="change">{{ endTimeShow }}
					</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import timeUtil from '../../../utils/timeUtil'
	import list from "./list.vue";

	export default {
		components: {
			list
		},
    props: {
        id: String
    },
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				popup: false,
				startTimeShow: '待选择',
				endTimeShow: '待选择',
				selectStartAndEnd: true,
				month: '待选择',
				temp: []
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			openChooseTime() {
				this.popup = false;
				this.show = true;
			},
			// 关闭选择事件
			closeRemindShow() {
				this.popup = false;
			},
			//确认
			confirm(res) {
				if (res.value < Number(new Date())) {
          uni.showToast({
            title: '请选择正确的开始时间',
            icon:'error'
          });
          //直接截断
          return;
				}

				let time = timeUtil.chageTimeType(res.value);
				this.month = time.month + '.' + time.day;
				let timeChange = timeUtil.formatTime(time.hours + ':' + time.seconds);
				//
				if (this.selectStartAndEnd === true) {
					// uni.clearStorageSync('Time');
					this.startTimeShow = timeChange;
					this.selectStartAndEnd = false;
					this.popup = true;
					this.temp.push(res.value);
				} else if (this.selectStartAndEnd === false) {
					this.temp.push(res.value);
          			// //判断别的会议时间是否与之冲突
          			// if(timeUtil.isArryConflictWithAny(this.temp,uni.getStorageSync(this.id))){
          			//   uni.showToast({
          			//     title: '会议时间有冲突',
          			//     icon:'error'
          			//   });
          			//   this.show = false;
          			//   this.popup = false;
          			//   //直接截断
          			//   return;
          			// }
					//存储时间戳
					uni.setStorageSync('Time', this.temp);
					this.endTimeShow = timeChange;
					//时间选择汇总！！
					let result = this.startTimeShow + "  " + this.endTimeShow;
					console.log(this.month + result);
					//
					this.selectStartAndEnd = true;
					this.popup = false;
				}
				//
				this.show = false;

			},
			//打开选择器
			chooseTimeSelect() {
				this.popup = true;
				this.show = false;
			},
      //取消按钮
      cancel(){
        this.show = false;
      }
		},
		created() {

		}
	}
</script>
<style>
	.tip {
		padding: 3%;
		color: #a0a0a0;
	}

	.popupListTimeT {
		height: 200rpx;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.popupListTimeT view {
		border-bottom: 1rpx rgb(195, 195, 195) solid;
		width: 90%;
		height: 30%;
		display: flex;
		align-items: center;
		margin-top: 3%;
		justify-content: space-between;
	}

	.change {
		color: #b5b5b5;
	}
</style>